<template>
  <div class="swiper-container1 lei">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(page,index) in pages">
      <ul>
        <li v-for="i in page" >
          <img :src="i.im"/>
          <p>{{i.t}}</p>
        </li>
      </ul>
    </div>

    </div>
    <div class="swiper-pagination"></div>
  </div>



</template>

<script>
  import Swiper from 'swiper'
    export default {
        name: 'lei',
        data () {
            return {
              m:[
                {im:require("../../assets/qula/img01.png"),t:"景点门票"},
                {im:require("../../assets/qula/img02.png"),t:"深圳必游"},
                {im:require("../../assets/qula/img03.png"),t:"游乐场"},
                {im:require("../../assets/qula/img04.png"),t:"海洋馆"},
                {im:require("../../assets/qula/img05.png"),t:"动植物园"},
                {im:require("../../assets/qula/img06.png"),t:"泡温泉"},
                {im:require("../../assets/qula/img07.png"),t:"去哪臻选"},
                {im:require("../../assets/qula/img08.png"),t:"一日游"},
                {im:require("../../assets/qula/img09.png"),t:"东部华侨城"},
                {im:require("../../assets/qula/img10.png"),t:"全部玩乐"},
              ],

            }
        },
      mounted(){
        new Swiper('.swiper-container1', {
//          loop: true,
//          // 如果需要分页器
          //autoplay: {
//            delay: 1000,
//            //stopOnLastSlide: false,
//            // disableOnInteraction: true,
        //},
          pagination: {
            el: '.swiper-pagination',//分页器
          },
        })
        },
      computed:{
          pages (){
              const pages=[]
            this.m.forEach((i,index)=>{
                  const page=Math.floor(index/8)
              if(!pages[page]){
                      pages[page]=[]
              }
              pages[page].push(i)
            })
            return pages;
          }
      }
    }
</script>

<style lang="stylus" scoped>
    .lei >>> .swiper-wrapper{
               height 0rem
               padding-bottom 50%
    }
  .lei{
    width 100%
    margin-top: 0.1rem
    overflow hidden
    position relative
    font-size 0.05rem
    border-bottom 1px solid #F1F1F1

    ul {
      width 100%
      li{
        width :25%
        float:left;
        padding-bottom 25%
        height 0rem
        overflow hidden
        text-align:center;
        img{
          width 60%
        }

          p{
            margin 0.02rem 0

          }
      }
    }

    .swiper-pagination {
      position absolute
     bottom  0.05rem

    }
    .swiper-pagination >>> .swiper-pagination-bullet {
      width: 0.08rem;
      height: 0.08rem;

    }
  }
</style>
